<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            background-color: #f6f7fa;
        }
        .context{
            width: 1024px;
            margin: 0 auto;
        }
        .main-title{
            text-align: center;
        }
        .news-box{}
        .news-box .list{
            display: flex;
            flex-flow: column nowrap;
        }
        .news-box .list .item{
            margin-bottom: 16px;
            border: 1px solid #dedede;
            display: flex;
            flex-flow: row nowrap;
            --h:160px;
            --p:20px;
            width: 100%;
            height: var(--h);
            background-color: white;
        }
        .news-box .list .img{
            width: var(--h);
            height: 100%;
            flex-shrink: 0;
        }
        .news-box .list .img>img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .news-box .list .info{
            flex-grow: 1;
            padding: var(--p);
            box-sizing: border-box;
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            /* calc() css的数学运算函数 */
            /* line-height: calc(12px*2); */
            /* line-height: calc( var(--p)*2 ); */
            line-height: calc( (var(--h) - (var(--p)*2)) / 3 );

        }
        .news-box .list .info p{
           margin: 0;
        }
        .news-box .list .info .desc{
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .active{
            color: orange;
        }
    </style>
    <script src="../assets/axios/axios.js"></script>
</head>
<body>
    <div class="context">
        <h4 class="main-title">新闻动态</h4>
        <div class="news-box">
            <div class="list">
    
                <!-- <div class="item">
                    <div class="img">
                        <img src="../assets/img/01.png" alt="" srcset="">
                    </div>
                    <div class="info">
                        <p class="title">测试标题</p>
                        <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati enim dolor cum illo ad modi odit rerum, explicabo voluptates, ut quasi expedita praesentium, a perspiciatis reprehenderit. Minima labore unde in. </p>
                        <p class="time">2022年10月14日</p>
                    </div>
                </div> -->
                
            </div>
            <div class="page">
                <!-- <input type="button" value="1" onclick="loadNews(1)">
                <input type="button" value="2" onclick="loadNews(2)"> -->
            </div>
        </div>
    </div>
    <script>
        function initPage(options={ }){
            let opt = Object.assign({
                el:null,
                pageNums: 1,
                currentPage: 1,
                callback:function(){}
            },options);

            if(!opt.el) return;

            let pageRoot = document.querySelector(opt.el);
            pageRoot.innerHTML = "";
            for (let i = 0; i < opt.pageNums; i++) {
                let pageBtn = document.createElement("input");
                pageBtn.type = "button";
                pageBtn.value = i+1;    
                pageBtn.className = ( (i+1)==opt.currentPage?"active":"" );

                pageBtn.onclick = function(){
                    opt.callback( i+1 )
                };

                pageRoot.appendChild(pageBtn);
            }

        }

        // https://www.itany.com/assets/list/new.png
        function setListDom(news=[]){
            let temp = "";
            for (let item of news) {
                temp+=`
                <div class="item">
                    <div class="img">
                        <img src="${item.img}" alt="" srcset="">
                    </div>
                    <div class="info">
                        <p class="title">${item.title}</p>
                        <p class="desc">${item.titletext}</p>
                        <p class="time">${item.createDate}</p>
                    </div>
                </div>
                `
            }
            let boxDom = document.querySelector(".list");
            boxDom.innerHTML = temp;
        }

        initPage({
            el:".page"
        })

        function loadNews(page=1){
            axios({
                url:"https://oa.itany.com/ItanyManager/web/findInformation",
                method:"get",
                params:{
                    page,
                    rows:4
                }
            }).then(function( {data} ){
                console.log(data.data.rows);
                setListDom(data.data.rows);
                initPage({
                    el:".page",
                    pageNums: Math.ceil(data.data.total/4) ,
                    currentPage:page,
                    callback:loadNews
                })
            })
        }

        loadNews();

    </script>
</body>
</html>